<template>
	<div class="mainbox">
		<div class="headerbut">
			<div class="navbut">
				<div class="navitem" v-for="(item,index) in typelist" :key="item.id" @click="changetype(item)"
					:style="{'background':item.id==currone?'#409EFF':'','color':item.id==currone?'#FFF':''}">
					{{item.title}}
				</div>
			</div>
			<div class="buttonbox">
				<el-button v-if="currone==1" type="primary" @click="toexamine()">审核</el-button>
				<el-button v-if="currone==2" type="primary" @click="toaccounts()">转账</el-button>
				<el-button type="primary">导出</el-button>
				<!-- <el-button
				    v-for="(item, index) in buttons"
				    :key="index"
				    :type="item.path | formatType"
				    :icon="item.icon"
				    :disabled="selection.length==0"
				    @click="tapButton(item)"
				    >{{ item.title }}</el-button
				> -->
			</div>
			<div class="searchbox">
				<el-input placeholder="请输入订单号、用户名、商户名称模糊查询" style="width: 320px;margin-right: 10px;"
					v-model="searchParamCp.keyword" size="mini" clearable>
				</el-input>
				<!-- <el-input placeholder="最低金额" type="number" style="width: 130px;margin-right: 10px;" v-model="searchParamCp.quick_search"
					size="mini" clearable>
				</el-input>
				<div>-</div> -->
				<!-- <el-input placeholder="最高金额" type="number" style="width: 130px;margin-right: 10px;margin-left: 10px" v-model="searchParamCp.quick_search"
					size="mini" clearable>
				</el-input> -->
				<div style="width: 360px;">
					<el-date-picker size="mini" v-model="searchParamCp.addtime" type="daterange" range-separator="至"
						start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<!-- 结算状态1待审核 2待支付 3已支付 空为全部 -->
				<el-select v-model="searchParamCp.settle_status" size="mini" placeholder="请选择结算状态"
					style="width: 200px;margin-right: 10px;margin-left: 10px;">
					<el-option v-for="(item,index) in statuslist" :key="item.id" :label="item.label" :value="item.id">
					</el-option>
				</el-select>
				<!-- <div style="width: 360px;margin-left: 10px;" v-if="currone==3">
					<el-date-picker
					size="mini"
					     v-model="searchParamCp.search_time"
					     type="daterange"
					     range-separator="至"
					     start-placeholder="转账开始日期"
					     end-placeholder="转账结束日期">
					   </el-date-picker>
				</div> -->
				<el-button style="margin-left: 10px;" type="primary" size="mini" @click="searchs()">搜索</el-button>
				<el-button size="mini" @click="reset()">重置</el-button>
			</div>

		</div>
		<div class="tablebox">
			<!-- <el-table
			ref="multipleTable"
			:data="goodsTypeData"
			tooltip-effect="dark"
			style="width: 100%"
			@selection-change="handleSelectionChange">
			<el-table-column
			  align="right">
			  <template slot="header" slot-scope="{ row }">
				  <div style="display: flex;justify-content: space-between;">
					  <div>商户名称: </div>
					   <div>商户电话:</div>
					    <div>可结算￥|服务费|订单数:</div>
					    <div>服务费率:%</div>
					     <div>待支付</div>
				  </div>
			  </template>
			</el-table-column>
			</el-table> -->
			<div v-for="(item,index) in goodsTypeData" :key="index">
				<div class="headerbox" @click="addselection(item)">
					<el-checkbox v-model="item.checked" @change="addselection(item)"></el-checkbox>
					<div>商户名称: {{item.store_name}}</div>
					<!-- <div>商户电话:{{item.mobile}}</div> -->
					<div>优惠券：可结算￥{{Number(item.settle_coupon_money/100).toFixed(2)}}</div>
					<div>
						订单：可结算￥{{Number(item.settle_money/100).toFixed(2)}}|服务费{{Number(item.server_money/100).toFixed(2)}}订单数:{{item.order_count}}
					</div>
					<div>手续费：￥{{Number(item.comm_money/100).toFixed(2)}}</div>
					<div>
						总结算：{{Number(item.settle_coupon_money/100+item.settle_money/100-item.comm_money/100).toFixed(2)}}
					</div>
					<div>服务费率:{{item.commission_rate}}</div>
					<!-- //结算状态1待审核 2待支付 3已支付 空为全部 -->
					<!-- <div >{{currone==1?'待审核':currone==2?'待支付':currone==3?'已支付':'全部'}}</div> -->
				</div>
				<el-table ref="table" :data="item.children" height="170px" border
					header-cell-class-name="main-table-header">
					<el-table-column prop="order_sn" align="center" label="订单编号"></el-table-column>
					<el-table-column prop="pay_money" align="center" label="订单金额(元)"></el-table-column>
					<el-table-column prop="server_money" align="center" label="服务费(元)"></el-table-column>
					<el-table-column prop="settle_money" align="center" label="可结算(元)"></el-table-column>
					<el-table-column align="center" label="优惠券抵扣" prop="coupon_money" />
					<el-table-column align="center" label="优惠券结算金额" prop="settle_coupon_money" />
					<el-table-column align="center" label="总结算金额">
						<template slot-scope="{row}">
							{{(Number(row.settle_coupon_money)+Number(row.settle_money)).toFixed(2)}}
						</template>
					</el-table-column>
					<!-- 2微信支付  3优生活支付 4账户余额支付 -->
					<el-table-column align="center" label="支付方式" prop="pay_type">
						<template slot-scope="{ row }">
							<el-tag v-if="row.pay_type==2">微信支付</el-tag>
							<el-tag type="success" v-if="row.pay_type==3">优生活支付</el-tag>
							<el-tag type="danger" v-if="row.pay_type==4">账户余额支付</el-tag>
						</template>
					</el-table-column>
					<el-table-column align="center" label="订单日期" prop="addtime">
						<template slot-scope="{ row }">
							{{getTime(row.addtime)}}
						</template>
					</el-table-column>
					<el-table-column align="center" label="审核日期" prop="pay_expire_time">
						<template slot-scope="{ row }" v-if="row.check_settle_time">
							{{getTime(row.check_settle_time)}}
						</template>
					</el-table-column>
					<el-table-column align="center" label="审核人">
						<template slot-scope="{ row }">
							admin
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-pagination v-if="total>0" class="main-pagination" :current-page.sync="page" :page-size="limit"
				:total="total" @current-change="onPageChange" layout="total,jumper,prev,pager,next"></el-pagination>
			<el-dialog :visible.sync="dialogVisible" :title="dialogTitle" append-to-body width="960px"
				@close="onDialogClose">
				<component :is="dialogView" @update="getGoodsTypeData" :selection="selection"></component>
			</el-dialog>
		</div>

	</div>
</template>

<script>
	import {
		get,
		del,
		post
	} from "@/assets/js/http.js";

	export default {
		name: "view-settlement",
		data() {
			return {
				goodsTypeData: [],
				page: 1,
				limit: 3,
				total: 0,
				selection: [],
				dialogVisible: false,
				dialogTitle: "",
				dialogView: "",
				info: {}, //编辑详情
				id: [],
				typelist: [{
					id: 1,
					title: '待审核'
				}, {
					id: 2,
					title: '待支付'
				}, {
					id: 3,
					title: '已支付'
				}, {
					id: '',
					title: '全部订单'
				}],
				currone: 1, //状态索引
				searchinfo: {
					keyword: '',
					addtime: [],
					settle_status: 1,
				},
				searchParamCp: {},
				statuslist: [{
					id: 1,
					label: '待审核'
				}, {
					id: 2,
					label: '待支付'
				}, {
					id: 3,
					label: '已支付'
				}], //结算状态1待审核 2待支付 3已支付 空为全部
			};
		},
		mounted() {
			this.getGoodsTypeData();
		},
		components: {
			// Add: () => import("./add.vue"),
			// Edit: () => import("./edit.vue")
		},
		computed: {
			buttons() {
				return this.$store.state.buttons;
			}
		},
		methods: {
			getTime(time) {
				let date = new Date(time * 1000)
				let year = date.getFullYear()
				let month = date.getMonth() + 1
				let day = date.getDate()
				// 时分秒
				let hour = date.getHours()
				let minute = date.getMinutes()
				let second = date.getSeconds()
				return `${year}-${month}-${day} ${hour}:${minute}:${second}`
			},
			searchs() {
				this.page = 1
				this.searchinfo = {
					...this.searchinfo,
					...this.searchParamCp
				}
				this.getGoodsTypeData()
			},
			reset() {
				this.page = 1
				this.searchParamCp = {}
				this.searchinfo = {
						keyword: '',
						addtime: [],
						settle_status: '',
					},
					this.getGoodsTypeData()
			},
			onPageChange(index) {
				this.page = index;
				this.getGoodsTypeData();
			},
			async getGoodsTypeData() {
				const data = await get({
					url: "/admin/finance.Settle/beMerchantSettleList",
					loading: true,
					params: {
						page: this.page,
						limit: this.limit,
						...this.searchinfo,
						...{
							addtime: this.searchinfo.addtime.length ? this.searchinfo.addtime.join(
								' - ') : ''
						}
					}
				});
				this.goodsTypeData = data.list;
				this.goodsTypeData.forEach(item => {
					item.checked = false
				})
				console.log(this.goodsTypeData)
				this.total = data.total;
			},
			onAdd() {
				this.dialogTitle = "新增商品分类";
				this.dialogView = "Add";
				this.dialogVisible = true;
			},
			onEdit() {
				this.dialogTitle = "编辑商品分类";
				this.dialogView = "Edit";
				this.dialogVisible = true;
			},
			onDelete() {
				this.$confirm(
						`此操作将永久删除该${this.selection.length}个商品分类, 是否继续?`,
						"提示", {
							confirmButtonText: "确定",
							cancelButtonText: "取消",
							type: "warning"
						}
					)
					.then(async () => {
						let query = "?";
						for (let i = 0; i < this.selection.length; i++) {
							const item = this.selection[i];
							if (i > 0) {
								query += "&ids[]=" + item.id;
							} else {
								query += "ids[]=" + item.id;
							}
						}
						await del({
							url: "/admin/shop.GoodsCategory/del" + query,
							successTip: true,
							loading: true
						});
						this.getGoodsTypeData();
					})
					.catch(() => {
						this.$refs.table.clearSelection();
					});
			},
			addselection(item) {
				if (item.checked == true) {
					const c = this.selection.findIndex(sitem => sitem == item)
					this.selection.splice(c, 1)
					item.checked = !item.checked
				} else {
					this.selection.push(item);
					item.checked = !item.checked
				}
				console.log(this.selection, 'selection')

			},
			//结算审核
			seting() {
				this.$confirm(`此操作将审核该${this.selection.length}个数据, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let ids = []
					this.selection.forEach(item => {
						item.children.forEach(s => {
							ids.push(s.id)
						})
					})
					console.log(ids, 'ids')
					post({
						url: "/admin/finance.Settle/checkSettle",
						data: {
							ids: ids
						},
						successTip: true,
						loading: true
					}).then(res => {
						this.getGoodsTypeData();
						this.selection = []
						this.goodsTypeData.forEach(item => {
							item.checked = false
						})
					})
					console.log(123)
					this.selection = []
					this.goodsTypeData.forEach(item => {
						item.checked = false
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			onRowClick(row) {
				// this.$refs.table.toggleRowSelection(row);
			},
			onDialogClose() {
				this.$refs.table.clearSelection();
			},
			tapButton(item) {
				if (item.path === "add") {
					this.onAdd();
				} else if (item.path === "set") {
					this.toexamine();
				} else if (item.path === "delete") {
					this.onDelete();
				}
			},
			//切换状态
			changetype(item) {
				this.currone = item.id
				this.selection = []
				this.page = 1
				this.searchParamCp.settle_status = item.id
				this.searchinfo = {
					...this.searchinfo,
					...this.searchParamCp
				}
				this.getGoodsTypeData();
			},
			//商家结算审核
			toexamine() {
				this.$confirm(`此操作将审核该${this.selection.length}个数据, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let ids = []
					this.selection.forEach(item => {
						item.children.forEach(s => {
							ids.push(s.id)
						})
					})
					console.log(ids, 'ids')
					post({
						url: "/admin/finance.Settle/checkSettle",
						data: {
							ids: ids
						},
						successTip: true,
						loading: true
					}).then(res => {
						console.log(123)
						this.getGoodsTypeData();
						this.selection = []
						this.goodsTypeData.forEach(item => {
							item.checked = false
						})
					})
					this.selection = []
					this.goodsTypeData.forEach(item => {
						item.checked = false
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
			//商家分账
			toaccounts() {
				this.$confirm(`此操作将对该${this.selection.length}个数据分账, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					let ids = []
					this.selection.forEach(item => {
						item.children.forEach(s => {
							ids.push(s.id)
						})
					})
					// console.log(ids, 'ids')
					if(ids.length>200){
						ids = ids.slice(0,200)
						console.log(ids.length,'ids.length',ids)
					}else{
						
					}
					// return
					post({
						url: "/admin/finance.Settle/paySettle", //"/admin/finance.Settle/paySettle",
						data: {
							ids: ids
						},
						successTip: true,
						loading: true
					}).then(res => {
						console.log(123)
						this.getGoodsTypeData();
						this.selection = []
						this.goodsTypeData.forEach(item => {
							item.checked = false
						})
					})
					this.selection = []
					this.goodsTypeData.forEach(item => {
						item.checked = false
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});
			},
		}
	};
</script>
<style lang="scss" scoped>
	.mainbox {
		box-sizing: border-box;
		/* display: flex; */
		flex-direction: column;
		align-items: stretch;
		align-content: stretch;
		flex-wrap: wrap;
		padding: 0 1.5rem;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	.headerbut {
		.navbut {
			display: flex;
			width: 900px;
			border: solid 1px #EBEEF5;
			margin: 10px auto 0 auto;

			.navitem {
				width: 25%;
				text-align: center;
				height: 40px;
				line-height: 40px;
				background: #FFF;
				color: #222222;
			}
		}

		.buttonbox {
			display: flex;
			align-items: center;
		}

		.searchbox {
			display: flex;
			align-items: center;
			margin-top: 10px;
		}
	}

	.tablebox {
		/* box-sizing: border-box; */
		margin-top: 15px;
		overflow: hidden;
		padding-right: 1px;
		padding-bottom: 1px;
		height: 82%;
		// background-color: #222222;
		/* box-sizing: border-box;
		margin-top: 15px;
		overflow: hidden; */
		/* padding-right: 1px;
		padding-bottom: 1px; */
	}

	.headerbox {
		display: flex;
		align-items: center;
		justify-content: space-around;
		height: 50px;
		font-size: 16px;
		border-top: solid 1px #EBEEF5;
		border-left: solid 1px #EBEEF5;
		border-right: solid 1px #EBEEF5;
	}

	.selectbox {
		margin: 0 30px;
	}
</style>